<html>
<head>
	<meta charset="utf-8">
	<title>备忘录</title>
	<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="../dist/css/bootstrap.min.css">
	<link rel="shortcut icon" href="../images/cat1.png">
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script src="../js/bootbox.js"></script>
	<style>
		.container{
			width: 100%;
			height: 800px;
			background:url(../images/bwl.jpg) ;
		}
		.head h3{
			color: #ffff33;
		}
		.head span{
			display: block;;
			font-size: 24px;
			color: #00ffcc;
			line-height: 30px;

		}
		.content{
			width: 80%; height: 80%;
			margin: 3% 10% 0 10%; 
			
		}
		.content textarea{
			width: 100%; height: 90%;
			background: #333;
			font-size: 18px;
			font-family:Arial,Verdana,Sans-serif;
			color: #00cc00;
		}
		.icon li{
			display: block;
			height: 5%;
		}
		.bg li{
			display: block;
			width:3%;
		}
		.bg li a{
			display: block;
			width: 20px; 
			height: 20px;
			border:1px solid #333;
		}
		.left{
			padding-left: 10%;
		}

		.image{
			width:100%;height: 5%;
			background: #ccc;
		}
		.image span{
			display: inline-block;
			width: 4%;height: 100%;
			padding-right: 1%;
		}
		.image span img{
			display: inline;
			margin-top:-40px;
		}
	</style>
	
</head>
<body>
	<div class="container">
		<div class="head row">
			<span class="col-md-6 col-sm-6 col-xs-6"><h3> <&#8194;备忘录</h3></span>
			<span class="col-md-6 col-sm-6 col-xs-6 text-right save"><h3>完成&#8194;</h3></span>
			<span class="text-center time col-md-12 col-sm-12 col-xs-12"></span>
		</div>

		<div class="content">
			<textarea>

			</textarea>
			<ul class="nav navbar row icon" style="margin-bottom:0;padding-bottom:0;">
				<li class="col-md-4 col-sm-4 col-xs-4 text-center"><span class="glyphicon glyphicon-floppy-save addimg"></span></li>
				<li class="col-md-4 col-sm-4 col-xs-4 text-center"><span class="glyphicon glyphicon-trash delete"></span></li>
				<li class="col-md-4 col-sm-4 col-xs-4 text-center"><span class="glyphicon glyphicon-edit edit"></span></li>
			</ul>
			<p class="text-center prevtime">最近编辑时间:</p>
		</div>

		<div class="row">
			<div class="col-md-6 col-sm-6 col-xs-6 left">
				<ul class="nav navbar row bg">
					<li class="col-md-2 col-sm-2 col-xs-2"><a href="#" style="background:#ffcccc;"></a></li>
					<li class="col-md-2 col-sm-2 col-xs-2"><a href="#" style="background:#ccccff;"></a></li>
					<li class="col-md-2 col-sm-2 col-xs-2"><a href="#" style="background:#cc99cc;"></a></li>
					<li class="col-md-2 col-sm-2 col-xs-2"><a href="#" style="background:#99ff99;"></a></li>
					<li class="col-md-2 col-sm-2 col-xs-2"><a href="#" style="background:#99ffff;"></a></li>
					<li class="col-md-2 col-sm-2 col-xs-2"><a href="#" style="background:#cc6633;"></a></li>
				</ul>
			</div>
			<div class="col-md-6 col-sm-6 col-xs-6 right">
				<ul class="nav navbar row bgp">
					<li class="col-md-2 col-sm-2 col-xs-2 house text-center"><a href="#" name="../images/house.jpg">房子</a></li>
					<li class="col-md-2 col-sm-2 col-xs-2 star text-center"><a href="#" name="../images/flower.jpg">花朵</a></li>
					<li class="col-md-2 col-sm-2 col-xs-2 dark text-center"><a href="#" name="../images/dark.jpg">夜晚</a></li>
					<li class="col-md-2 col-sm-2 col-xs-2 summer text-center"><a href="#" name="../images/summer.jpg">夏天</a></li>
					<li class="col-md-2 col-sm-2 col-xs-2 star text-center"><a href="#" name="../images/star.jpg">星星</a></li>
					<li class="col-md-2 col-sm-2 col-xs-2 text-center"><a href="#"></a></li>
				</ul>
			</div>
		</div>

		<div class="image">
			<span></span> <span></span> <span></span> <span></span>
			<span></span> <span></span> <span></span> <span></span>
			<span></span> <span></span> <span></span> <span></span>
			<span></span> <span></span> <span></span> <span></span>
			<span></span> <span></span> <span></span> <span></span>
		</div>
	</div>
<script>
	var date=new Date();
	var value=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+":"+(date.getMinutes()<10 ? "0"+date.getMinutes():date.getMinutes())+":"+(date.getSeconds()<10? "0"+date.getSeconds():date.getSeconds());
	$('.time').text("现在是北京时间："+value);
	$('.bg a').click(function(){
		var tmp=$(this).css("background-color");
		$('.content textarea').css("color",tmp);
		
	});
	 
	$('.save').click(function(){
		bootbox.confirm("已经保存好了呦！😊",function(result){
			if(result){
				if(window.localStorage){
					$('.prevtime').text("最近编辑时间:"+storage.getItem('PrevTime'));
				}
				storage.setItem("TxtContent",$('textarea').val());
				storage.setItem("PrevTime",value);
				window.location.reload();
				
			}
		});
	});
	var img=new Image();
	$('.addimg').click(function(){
		bootbox.confirm({
			title: '请输入位置和图片源地址',
			message:`
				<input type="text" class="form-control imgindex"/>
				<input type="text" class="form-control imgsrc"/>
				`,
			callback:function(result){
				if(result){
					img.src=$('.imgsrc').val();
					var index=$('.imgindex').val();
					$('.image span:eq('+index+')').append(img);
				}
			}
		});
	});
	$('.delete').click(function(){
		bootbox.confirm("确定删除全部吗？",function(result){
			if(result){
				$('textarea').val("");
			}
		});
	});
	$('.edit').click(function(){
		bootbox.confirm({
			title: '输入更改的信息',
			message:`<input type="text" class="form-control addtxt"/>`,
			callback:function(result){
				if(result){
					var tmp=$('textarea').val();
					tmp+=$('.addtxt').val();
					$('textarea').val(tmp);
				}
			}
		});
		
	});
	
	$('.bgp a').click(function(e){
		var pn=$(this).attr("name");
		if(pn==="../images/house.jpg")
			$('.content textarea').css("background-image","url(../images/house.jpg)");
		else if(pn==="../images/flower.jpg")
			$('.content textarea').css("background-image","url(../images/flower.jpg)");
		else if(pn==="../images/summer.jpg")
			$('.content textarea').css("background-image","url(../images/summer.jpg)");
		else if(pn==="../images/star.jpg")
			$('.content textarea').css("background-image","url(../images/star.jpg)");
		else
			$('.content textarea').css("background-image","url(../images/dark.jpg)");
	});

	/*设置与获取Cookie*/
	var Cookie ={}
	Cookie.write = function(key, value, duration){
		date.setTime(date.getTime()+1000*60*60*24*30);
		document.cookie = key + "=" + encodeURI(value) + "; expires=" + date.toGMTString();
	};
	Cookie.read = function(key){
	var arr=document.cookie.match(new RegExp("(^| )"+key+"=([^;]*)(;|$)"));
	if(arr != null)
		return decodeURIComponent(arr[2]);
		return "";
	};
	//定义本地存储对象
	var storage = {
	 getItem:function(key){//假如浏览器支持本地存储则从localStorage里getItem，否则乖乖用Cookie
		 return window.localStorage? localStorage.getItem(key): Cookie.read(key); 
	 },
	 setItem:function(key,val){//假如浏览器支持本地存储则调用localStorage，否则乖乖用Cookie
		if (window.localStorage) {
		    localStorage.setItem(key,val); 
		} else {
		   Cookie.write(key,val); 
		 }
	 }
	};
 
    window.onbeforeunload=function(){
        // 离开本页之前保存数据
        if(!window.localStorage){
            storage.setItem('TxtContent',$('textarea').val());
            storage.setItem('PrevTime',value);
        }else{
            storage.setItem('TxtContent',$('textarea').val());
            storage.setItem('PrevTime',value);
        }
 
    };
    window.onload=function(){
        // 加载页面时判断是否有数据并加载
        if(!window.localStorage){
            if(storage.getItem('TxtContent')==undefined) {
                $('textarea').val("");
            }else{
                $('textarea').val(storage.getItem('TxtContent'));
                $('.prevtime').text("最近编辑时间:"+storage.getItem('PrevTime'));
            }
        }else{
            if(storage.getItem('TxtContent')!=null){
            	$('textarea').val(storage.getItem('TxtContent'));
            	 $('.prevtime').text("最近编辑时间:"+storage.getItem('PrevTime'));
            }else{
                $('textarea').val("");
            }
        }
 
    };
</script>
</body>
</html>
